<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>猫眼电影首页渲染</title>

    <link href="./css/maoyan.css" rel="stylesheet" />
  </head>
  <body>
    <div id="movie">
      <!-- <header>
        <div class="header">猫眼电影</div>
        <button><img src="img/order.png" alt="" /></button>
        <div class="logo">
          <img src="img/logo.png" alt="" />
          <div class="jump">
            <a href="javascript:">发现最新最热电影</a>
            <span>|<a href="javascript:">打开APP></a></span>
          </div>
        </div>
        <nav>
          <span>厦门</span>
          <ul>
            <li><a href="javascript:">热映</a></li>
            <li><a href="javascript:">影院</a></li>
            <li><a href="javascript:">待映</a></li>
            <li><a href="javascript:">经典电影</a></li>
          </ul>
          <button class="search">
            <img src="./img/search-red.png" alt="" />
          </button>
        </nav>
      </header> -->
      <myheader></myheader>
      <mycontent :movie="movie"></mycontent>
      <myfooter></myfooter>
    </div>

    <script src="./axios.min.js"></script>
    <script src="./flexible.js"></script>
    <script src="../task/vue.js"></script>
    <script>
      let myheader = {
        template: `
          <div class="header">
              <img src="./img/header.png" alt="">
          </div>`,
      };

      let mycontent = {
        data() {
          return {
            red: "red",
            blue: "blue",
          };
        },
        props: ["movie"],
        template: `
          <div>
            <div class="context" v-for="item in movie">
              <img :src="item.img" alt="">
              <div class="introduce">
                <div class="main">
                  <h1>{{ item.nm }}</h1>
                  <span v-if="item.globalReleased">观众评<em>{{ item.mk }}</em></span>
                  <span v-else><em>{{ item.wish }}</em>人想看</span>
                  <span>{{ item.desc }}</span>
                  <span>{{ item.showInfo }}</span>
                </div>
                <button :class="item.showStateButton.content === '购票' ? red : blue">
                  {{ item.showStateButton.content }}
                </button>
              </div>
            </div>
          </div>
          `,
      };

      let myfooter = {
        template: `
          <div class="footer">
              <img src="./img/footer.png" alt="">
          </div>`,
      };

      let vm = new Vue({
        el: "#movie",
        data: {
          movie: [],
        },
        methods: {},
        created() {
          axios.get("./task/movie.json").then((res) => {
            this.movie = res.data.data.hot;
          });
        },
        components: {
          myheader,
          mycontent,
          myfooter,
        },
      });
    </script>
  </body>
</html>
